import React from 'react';
import { ComponentMeta } from '@storybook/react';
import { action } from '@storybook/addon-actions';
// import { withInfo } from '@storybook/addon-info';

import Button from './button';

export default {
  title: 'Components/Button',
  component: Button,
  // decorators: [withInfo],
  parameters: {
    info: {
      // text: ` description `,
      // inline: true,
    }
  },
  argTypes: {
    btnType: {
      description: '设置按钮样式',
      table: {
        type: { 
          summary: 'default | primary | danger | link', 
        },
        defaultValue: {
          summary: 'default',
        }
      },
    },
    disabled: {
      description: '是否禁用',
      table: {
        type: { 
          summary: 'boolean', 
        },
        defaultValue: {
          summary: 'false',
        },
      },
    },
    href: {
      description: '超链接地址，只在按钮样式为 link 下起作用',
      table: {
        type: { 
          summary: 'string', 
        },
      },
    },
    size: {
      description: '设置按钮大小',
      // type: {
      //   required: true,
      // },
      table: {
        type: { 
          summary: 'lg | middle | sm', 
        },
        defaultValue: {
          summary: 'middle',
        }
      },
    },
  }
} as ComponentMeta<typeof Button>;


export const defaultButton = () => (
  <>
    <Button onClick={action('clicked')}> button </Button>
  </>
)

export const buttonWithSize = () => (
  <>
    <Button size="lg"> Large </Button>
    <Button size="sm"> Small </Button>
  </>
)

export const buttonWithType = () => (
  <>
    <Button btnType="primary"> primary </Button>
    <Button btnType="danger"> danger </Button>
    <Button btnType="link" href="https://baidu.com" target="_blank"> link button </Button>
  </>
)
